<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灵感发生器 - AI内容工坊</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'HarmonyOS Sans', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #e2e8f0;
            padding: 20px;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
            color: white;
            position: relative;
            padding: 25px;
            background: rgba(28, 30, 48, 0.8);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .logo-container {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .logo-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
        }

        .logo-icon i {
            font-size: 36px;
            color: white;
        }

        .logo-text {
            font-size: 48px;
            font-weight: 800;
            background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: 1px;
            text-shadow: 0 2px 10px rgba(164, 158, 254, 0.3);
        }

        .subtitle {
            font-size: 24px;
            margin: 15px 0 25px;
            color: #94a3b8;
            font-weight: 500;
            letter-spacing: 1px;
        }

        .tabs {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .tab {
            padding: 12px 30px;
            background: rgba(255, 255, 255, 0.15);
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            border-radius: 50px;
            margin: 0 5px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            color: #e2e8f0;
            font-size: 18px;
        }

        .tab.active {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
        }

        .tab:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(79, 70, 229, 0.4);
        }

        .content-section {
            display: none;
            animation: fadeIn 0.5s ease-in-out;
            background: rgba(28, 30, 48, 0.7);
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 40px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(90, 100, 220, 0.4);
        }

        .content-section.active {
            display: block;
        }

        .section-title {
            font-size: 32px;
            text-align: center;
            margin-bottom: 25px;
            background: linear-gradient(90deg, #818cf8, #c4b5fd);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700;
            letter-spacing: 0.8px;
            position: relative;
            padding-bottom: 15px;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 4px;
            background: linear-gradient(90deg, #818cf8, #c4b5fd);
            border-radius: 2px;
        }

        .story-container {
            background: rgba(40, 42, 65, 0.6);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 25px;
            border: 1px solid rgba(90, 100, 220, 0.3);
        }

        .story-text {
            font-size: 18px;
            line-height: 1.8;
            margin-bottom: 25px;
            color: #e2e8f0;
            min-height: 120px;
            padding: 15px;
            background: rgba(35, 36, 58, 0.4);
            border-radius: 10px;
        }

        .choices-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 25px 0;
        }

        .choice {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            color: white;
            border: none;
            border-radius: 15px;
            padding: 20px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 15px;
            text-align: left;
            box-shadow: 0 5px 15px rgba(79, 70, 229, 0.4);
        }

        .choice:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(79, 70, 229, 0.6);
            background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
        }

        .choice-icon {
            font-size: 24px;
        }

        .result-container {
            background: rgba(40, 42, 65, 0.6);
            border-radius: 15px;
            padding: 25px;
            margin-top: 25px;
            border: 1px solid rgba(90, 100, 220, 0.3);
            display: none;
        }

        .result-title {
            font-size: 22px;
            color: #c4b5fd;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .result-content {
            font-size: 18px;
            line-height: 1.8;
            padding: 20px;
            background: rgba(35, 36, 58, 0.4);
            border-radius: 10px;
            min-height: 120px;
        }

        .input-group {
            display: flex;
            gap: 20px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .input-container {
            flex: 1;
            min-width: 250px;
        }

        .input-label {
            display: block;
            margin-bottom: 10px;
            font-size: 18px;
            color: #94a3b8;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .input-field {
            width: 100%;
            padding: 15px;
            background: rgba(40, 42, 65, 0.7);
            border: 2px solid #4f46e5;
            border-radius: 15px;
            font-size: 16px;
            color: #e2e8f0;
            transition: all 0.3s ease;
        }

        .input-field:focus {
            outline: none;
            border-color: #818cf8;
            box-shadow: 0 0 15px rgba(129, 140, 248, 0.4);
        }

        .input-field::placeholder {
            color: #64748b;
        }

        .btn {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 15px 35px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 7px 20px rgba(79, 70, 229, 0.5);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(79, 70, 229, 0.7);
        }

        .btn:active {
            transform: translateY(1px);
        }

        .btn-lg {
            padding: 16px 45px;
            font-size: 20px;
        }

        .adventure-container {
            background: rgba(40, 42, 65, 0.6);
            border-radius: 15px;
            padding: 30px;
            margin-top: 20px;
            border: 1px solid rgba(90, 100, 220, 0.3);
        }

        .adventure-title {
            font-size: 24px;
            color: #c4b5fd;
            margin-bottom: 20px;
            text-align: center;
        }

        .adventure-story {
            font-size: 18px;
            line-height: 1.8;
            padding: 20px;
            background: rgba(35, 36, 58, 0.4);
            border-radius: 10px;
            min-height: 150px;
            margin-bottom: 25px;
        }

        .adventure-choices {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .adventure-choice {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            color: white;
            border: none;
            border-radius: 15px;
            padding: 20px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            box-shadow: 0 5px 15px rgba(79, 70, 229, 0.4);
        }

        .adventure-choice:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(79, 70, 229, 0.6);
            background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
        }

        .adventure-controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }

        .centered {
            display: flex;
            justify-content: center;
            margin-top: 25px;
        }

        .particle {
            position: absolute;
            font-size: 1.5rem;
            opacity: 0;
            animation: float 1.5s ease-out forwards;
            z-index: 5;
            pointer-events: none;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes float {
            0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }
            100% { opacity: 0; transform: translateY(-80px) scale(0.5); filter: blur(2px); }
        }

        @media (max-width: 768px) {
            .logo-text {
                font-size: 36px;
            }

            .subtitle {
                font-size: 18px;
            }

            .tab {
                padding: 10px 20px;
                font-size: 16px;
            }

            .section-title {
                font-size: 28px;
            }

            .choices-container, .adventure-choices {
                grid-template-columns: 1fr;
            }

            .choice, .adventure-choice {
                padding: 15px;
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <div class="logo-container">
            <div class="logo-icon">
                <i class="fas fa-lightbulb"></i>
            </div>
            <div class="logo-text">灵感发生器</div>
        </div>
        <p class="subtitle">AI内容工坊 - 故事分支 · 创意生成 · 文字冒险</p>
    </div>

    <div class="tabs">
        <button class="tab active" data-tab="story">多线叙事</button>
        <button class="tab" data-tab="ai">创意生成</button>
        <button class="tab" data-tab="adventure">文字冒险</button>
    </div>

    <!-- 多线叙事部分 -->
    <div class="content-section active" id="story-section">
        <h2 class="section-title">多线叙事</h2>
        <p class="subtitle" style="text-align: center; margin-bottom: 25px;">选择你的故事路径，体验不同结局</p>

        <div class="story-container">
            <div class="story-text" id="story-text">
                公元2222年，你作为月球基地的首席科学家，在月海深处发现了一个神秘物体。扫描结果显示，这个物体似乎来自银河系之外，并且含有未知的能量信号...
            </div>

            <div class="choices-container">
                <button class="choice" data-next="1">
                    <i class="fas fa-battery-full choice-icon"></i> 使用基地的能量核心激活物体
                </button>
                <button class="choice" data-next="2">
                    <i class="fas fa-robot choice-icon"></i> 派遣AI机器人先遣队去探查
                </button>
                <button class="choice" data-next="3">
                    <i class="fas fa-shield-alt choice-icon"></i> 向地球总部申请特殊防护装备
                </button>
                <button class="choice" data-next="4">
                    <i class="fas fa-flask choice-icon"></i> 尝试分析物体的物质成分
                </button>
            </div>
        </div>

        <div class="result-container" id="branch-result">
            <h3 class="result-title"><i class="fas fa-star"></i> 叙事路径</h3>
            <div class="result-content" id="branch-content">
                <!-- 分支结果将在这里显示 -->
            </div>
        </div>

        <div class="centered">
            <button class="btn" id="reset-story">
                <i class="fas fa-redo"></i> 开始新故事
            </button>
        </div>
    </div>

    <!-- 创意生成部分 -->
    <div class="content-section" id="ai-section">
        <h2 class="section-title">创意生成</h2>
        <p class="subtitle" style="text-align: center; margin-bottom: 25px;">输入关键词，生成独特创意</p>

        <div class="input-group">
            <div class="input-container">
                <label class="input-label"><i class="fas fa-user-astronaut"></i> 第一个元素</label>
                <input type="text" class="input-field" id="element1" placeholder="输入关键词（例如：宇航员）">
            </div>

            <div class="input-container">
                <label class="input-label"><i class="fas fa-whale"></i> 第二个元素</label>
                <input type="text" class="input-field" id="element2" placeholder="输入关键词（例如：鲸鱼）">
            </div>
        </div>

        <div class="centered">
            <button class="btn btn-lg" id="generate-btn">
                <i class="fas fa-bolt"></i> 生成创意内容
            </button>
        </div>

        <div class="result-container" id="ai-result">
            <h3 class="result-title"><i class="fas fa-wand-sparkles"></i> AI创作内容</h3>
            <div class="result-content" id="ai-content">
                <!-- AI生成的内容将在这里显示 -->
            </div>
        </div>
    </div>

    <!-- 文字冒险部分 -->
    <div class="content-section" id="adventure-section">
        <h2 class="section-title">文字冒险</h2>
        <p class="subtitle" style="text-align: center; margin-bottom: 25px;">输入主题，开启你的冒险旅程</p>

        <div class="input-container">
            <label class="input-label"><i class="fas fa-dragon"></i> 冒险主题</label>
            <input type="text" class="input-field" id="adventure-theme" placeholder="输入冒险主题（例如：太空探险、古墓寻宝）">
        </div>

        <div class="centered">
            <button class="btn btn-lg" id="start-adventure">
                <i class="fas fa-play"></i> 开始冒险
            </button>
        </div>

        <div class="adventure-container" id="adventure-container" style="display: none;">
            <h3 class="adventure-title" id="adventure-title">你的冒险旅程</h3>
            <div class="adventure-story" id="adventure-story">
                <!-- 冒险故事将在这里显示 -->
            </div>

            <div class="adventure-choices" id="adventure-choices">
                <!-- 冒险选择将在这里显示 -->
            </div>

            <div class="adventure-controls">
                <button class="btn" id="restart-adventure">
                    <i class="fas fa-redo"></i> 重新开始
                </button>
                <button class="btn" id="save-adventure">
                    <i class="fas fa-save"></i> 保存故事
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    // 扩展的故事分支定义
    const storyBranches = {
        0: {
            text: "公元2222年，你作为月球基地的首席科学家，在月海深处发现了一个神秘物体。扫描结果显示，这个物体似乎来自银河系之外，并且含有未知的能量信号...",
            choices: [
                { text: "使用基地的能量核心激活物体", next: 1 },
                { text: "派遣AI机器人先遣队去探查", next: 2 },
                { text: "向地球总部申请特殊防护装备", next: 3 },
                { text: "尝试分析物体的物质成分", next: 4 }
            ]
        },
        1: {
            text: "当你将能量核心连接到神秘物体时，整个月震监测站都开始震动。物体表面开始发光，并显示出复杂的符号。一个声音直接在你的意识中响起：'你们的能源系统对我们很有趣...'",
            choices: [
                { text: "尝试与这个意识体进行沟通", next: 11 },
                { text: "立即断开能量核心的连接", next: 12 },
                { text: "询问他们的来意和目的", next: 13 }
            ]
        },
        11: {
            text: "你通过意识交流了解到这是来自仙女星系'创造者联盟'的技术样本。作为对他们技术的交换，他们提出给地球提供一种清洁能源技术。但这会带来政治动荡...",
            choices: [
                { text: "接受技术交换的提议", next: 21 },
                { text: "婉拒但请求建立知识交流", next: 22 },
                { text: "要求更多关于他们文明的信息", next: 23 }
            ]
        },
        21: {
            text: "在你将清洁能源技术带回地球的第五年，地球确实实现了零排放目标，但也引起了能源寡头们的激烈反抗，引发了名为'太阳战争'的全球冲突...",
            final: true,
            summary: "结局：技术革命\n\n你选择的路径导致了技术跃升，但也加剧了社会矛盾。在获得外星先进能源技术的同时，地球陷入了一场名为'太阳战争'的全球冲突。作为第一个接触外星科技的人，你被推向了历史前台，成为新时代的领袖也是争议中心人物。\n\n关键转折：选择接受外星的快速技术转让导致能源革命。"
        },
        22: {
            text: "尽管进展缓慢，但通过逐渐的文化和技术交流，地球与仙女星系建立了持久的盟友关系。100年后，人类终于有能力进行星际殖民，成为星际公民...",
            final: true,
            summary: "结局：星际联盟\n\n通过谨慎的文化交流，人类逐渐接受了仙女星系的知识。这段合作关系使人类在和平中进入星际时代。你成为历史上第一位'星际文化大使'，为人类开辟了与其他文明共存的新模式。\n\n关键转折：选择建立长期合作关系而非快速技术转移。"
        },
        23: {
            text: "在深入交流中，你了解到他们的文明正面临一场宇宙级的危机。他们需要地球的帮助来保存他们的文明火种。你成为了两个文明之间的桥梁...",
            choices: [
                { text: "承诺帮助保存他们的文明", next: 31 },
                { text: "寻求地球政府的支持", next: 32 },
                { text: "要求他们提供更先进的技术作为交换", next: 33 }
            ]
        },
        31: {
            text: "你秘密帮助他们在月球基地建立了文明保存库。但当地球政府发现时，引发了外交危机。最终，人类和外星文明达成了新的合作协议...",
            final: true,
            summary: "结局：文明守护者\n\n你选择帮助外星文明保存他们的知识火种，尽管最初引发了危机，但最终促成了两个文明的深度合作。你被两个文明共同授予'文明守护者'称号，成为宇宙和平的象征。"
        },
        12: {
            text: "在你断开连接时，神秘物体突然启动，将整个月球基地的能量全部吸收。接着它像花朵一样绽放，释放出数十万个微小晶体散布到地球轨道...",
            final: true,
            summary: "结局：星际播种者\n\n你无意中激活了外星设备的播种机制。数十万晶体在接触地球大气层后化为无害能量，但改变了地球生物的DNA，引发了一波加速进化。你被后代称为'星际播种者'，新时代的物种以你为名。\n\n关键转折：因恐惧而断开连接导致无法控制的后果。"
        },
        13: {
            text: "意识体透露他们是'观察者联盟'的成员，负责监测银河系文明发展。他们对人类的技术进步感到担忧，认为人类可能对宇宙秩序构成威胁...",
            choices: [
                { text: "辩解人类文明的和平本质", next: 41 },
                { text: "展示人类文明的成就", next: 42 },
                { text: "询问他们的评估标准", next: 43 }
            ]
        },
        41: {
            text: "你展示了人类历史上的和平成就和文化多样性。观察者被人类的艺术和哲学打动，决定给予人类'观察保护'状态，避免其他高等文明干预...",
            final: true,
            summary: "结局：文化使者\n\n通过展示人类的文化成就，你成功改变了外星观察者对人类的看法。人类被纳入'宇宙文化保护名单'，获得了安全发展的机会。你成为人类文化大使，负责向宇宙展示人类文明的精华。"
        },
        2: {
            text: "机器人队伍进入物体内部后，传输回难以置信的数据：里面是一个完整的生态球，有奇特的植物和小型生物存在。但随后，一个巨大的影子出现在生态城市上空...",
            choices: [
                { text: "让机器人采集样本后立即返回", next: 13 },
                { text: "继续探索并尝试与生物接触", next: 14 },
                { text: "部署防御机器人保护先遣队", next: 15 }
            ]
        },
        13: {
            text: "当机器人返回时，它们的金属表面粘附了神秘植物孢子。这些孢子在月球的特殊环境下迅速生长，一天内就覆盖了整个基地建筑，形成了一座奇异植物都市...",
            final: true,
            summary: "结局：植物都市\n\n你带回了改变月球环境的生命形态。奇异植物以不可思议的速度成长，将月球基地转变为星际丛林。你成为这个新生态系统的守护者，与改造后的植物生命形成了共生关系。\n\n关键转折：谨慎地带回外星生命样本。"
        },
        14: {
            text: "你的机器人触发了球内生物警报系统，巨大生物启动了某种装置，机器人信号突然中断。而基地工作人员报告说，所有玻璃表面都开始出现奇怪的数字...",
            final: true,
            summary: "结局：量子信息\n\n尝试接触触发的外星防御系统没有实体攻击，而是永久改变了人类认知信息的方式。你的意识与量子网络连接，成为人类第一个真正的'量子思想家'，同时被外星数据彻底改变了思维模式。\n\n关键转折：鲁莽地探索导致意识的量子化转变。"
        },
        15: {
            text: "防御机器人与神秘生物对峙时，意外触发了物体的自我防御机制。整个物体开始变形，释放出强大的能量场，将月球基地与地球的通讯完全切断...",
            choices: [
                { text: "尝试手动关闭防御机制", next: 51 },
                { text: "撤离基地人员", next: 52 },
                { text: "向地球发送紧急求救信号", next: 53 }
            ]
        },
        51: {
            text: "你冒险进入物体内部，发现了一个控制中枢。在关闭防御机制的过程中，你意外获得了控制物体的能力，成为了这个外星科技的新主人...",
            final: true,
            summary: "结局：科技掌控者\n\n你的勇敢行动让你获得了控制外星科技的能力。你成为人类历史上第一个掌握高等外星技术的人，开启了人类科技的新纪元。"
        },
        3: {
            text: "在等待装备抵达的三天里，神秘物体发生了变化。它表面开始出现符号，你认出这是某种数学语言。就在你试图解读时，基地电脑突然被神秘代码入侵...",
            choices: [
                { text: "尝试切断基地网络以阻止入侵", next: 15 },
                { text: "允许访问但引导到隔离系统", next: 16 },
                { text: "尝试与入侵者沟通", next: 17 }
            ]
        },
        15: {
            text: "虽然阻止了入侵，但切断网络的同时也停止了生命维持系统的自动更新程序。在接下来24小时中，需要人工维护系统才避免了基地大灾难...",
            final: true,
            summary: "结局：守护者\n\n你在危机中保护了月球基地，尽管付出了重大代价。这决定展示了你在极端条件下的领导才能。地球联邦任命你为新设立的'星际安全部'首任部长，负责应对外星威胁。\n\n关键转折：以安全为重而切断基地网络。"
        },
        16: {
            text: "神秘代码在隔离系统中重组为一张银河系星图，标记了地球所在位置。同时检测到物体发送出了某种信号，而三天后观测站发现一艘巨型飞船正以不可思议的速度飞向太阳系...",
            final: true,
            summary: "结局：接触信号\n\n你的决定使人类首次主动接触高等文明。神秘飞船携带着知识宝库和星际友谊而来，地球进入了'新大航海时代'。你被任命为地球第一任星际大使，开始领导人类进入星际社会。\n\n关键转折：在隔离系统中允许外星数据运行。"
        },
        17: {
            text: "你通过基地通讯系统发送了和平信息。神秘代码停止了入侵，转而开始传输大量科学数据。这些数据包含解决地球环境危机的关键技术...",
            choices: [
                { text: "立即将数据传回地球", next: 61 },
                { text: "先验证数据的真实性", next: 62 },
                { text: "询问数据的来源和目的", next: 63 }
            ]
        },
        61: {
            text: "数据传回地球后，全球科学家团队确认了其价值。新技术在一年内解决了地球的气候危机，你被授予诺贝尔和平奖，成为人类救世主...",
            final: true,
            summary: "结局：地球救星\n\n你带回的技术彻底解决了地球的环境危机，使人类文明得以延续。你被全球公认为人类救星，你的生日被定为全球感恩日。"
        },
        4: {
            text: "初步分析显示物体由一种未知的合金构成，含有地球上不存在的元素。更令人惊讶的是，物体内部似乎有生物特征，像是某种休眠的生命形式...",
            choices: [
                { text: "尝试唤醒休眠的生命形式", next: 71 },
                { text: "进行更深入的生物分析", next: 72 },
                { text: "联系地球生物伦理委员会", next: 73 }
            ]
        },
        71: {
            text: "在温和的能量刺激下，生命形式苏醒了。它通过心灵感应与你沟通，自称是'宇宙园丁'，负责在银河系播种生命。它邀请你加入他们的使命...",
            choices: [
                { text: "接受邀请成为宇宙园丁", next: 81 },
                { text: "请求它帮助地球生态恢复", next: 82 },
                { text: "询问更多关于宇宙生命的信息", next: 83 }
            ]
        },
        81: {
            text: "你加入了宇宙园丁的行列，乘坐外星飞船离开太阳系。在接下来的几个世纪里，你在银河系播种了无数生命，成为传说中的'生命播种者'...",
            final: true,
            summary: "结局：生命播种者\n\n你选择离开地球，加入宇宙园丁的行列。在银河系播种生命的过程中，你见证了无数文明的诞生与成长，成为宇宙生命网络的重要一环。"
        },
        72: {
            text: "深入分析揭示这种生命形式是高度进化的植物智慧体。它们通过光合作用获取能量，并能与任何碳基生命进行心灵沟通。这可能是人类与植物沟通的关键...",
            final: true,
            summary: "结局：植物沟通者\n\n你的发现开启了人类与植物智慧沟通的新纪元。地球上的森林被重新认识为智慧网络，人类学会了与自然和谐共处的新方式。"
        }
        // 更多分支可以继续添加...
    };

    // 文字冒险模板
    const adventureTemplates = {
        space: {
            title: "太空探险",
            start: "你作为星际飞船'探索号'的船长，正在执行一项深空探测任务。突然，飞船接收到来自未知星系的求救信号。信号源位于一个从未被探索过的星云内部...",
            choices: [
                { text: "前往信号源调查", next: "space1" },
                { text: "向星际联盟报告", next: "space2" },
                { text: "增强飞船防御系统", next: "space3" }
            ]
        },
        tomb: {
            title: "古墓寻宝",
            start: "作为考古学家，你在埃及沙漠发现了一个未被记载的法老墓穴。进入墓穴后，你发现墙壁上刻满了神秘的象形文字，通道深处传来奇怪的声音...",
            choices: [
                { text: "解读墙壁上的象形文字", next: "tomb1" },
                { text: "探索声音来源", next: "tomb2" },
                { text: "设置安全营地", next: "tomb3" }
            ]
        },
        cyberpunk: {
            title: "赛博都市",
            start: "在霓虹闪烁的未来都市，你是一名顶尖黑客。你接到一个神秘委托：入侵全球最大的科技公司'天网系统'的核心数据库。报酬高得惊人，但风险同样巨大...",
            choices: [
                { text: "接受委托开始行动", next: "cyber1" },
                { text: "调查委托人的背景", next: "cyber2" },
                { text: "提升自己的黑客装备", next: "cyber3" }
            ]
        },
        fantasy: {
            title: "魔法王国",
            start: "在艾尔达王国，你是一名年轻的魔法学徒。王国正面临黑暗势力的威胁，而你在古籍中发现了一个可能拯救王国的古老咒语，但需要三种稀有材料...",
            choices: [
                { text: "前往龙之谷寻找龙鳞", next: "fantasy1" },
                { text: "潜入精灵森林获取月光露", next: "fantasy2" },
                { text: "探索古代遗迹寻找星尘", next: "fantasy3" }
            ]
        }
    };

    // 初始化事件监听器
    document.addEventListener('DOMContentLoaded', function() {
        // 标签切换
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', function() {
                // 更新标签状态
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');

                // 切换内容
                document.querySelectorAll('.content-section').forEach(s => s.classList.remove('active'));
                const target = this.textContent.trim();
                if (target === "多线叙事") {
                    document.getElementById('story-section').classList.add('active');
                } else if (target === "创意生成") {
                    document.getElementById('ai-section').classList.add('active');
                } else if (target === "文字冒险") {
                    document.getElementById('adventure-section').classList.add('active');
                }
            });
        });

        // 故事分支选择
        document.querySelectorAll('.choice').forEach(choice => {
            choice.addEventListener('click', function() {
                const nextStep = this.getAttribute('data-next');
                updateStory(nextStep);
            });
        });

        // 重置故事
        document.getElementById('reset-story').addEventListener('click', resetStory);

        // AI生成
        document.getElementById('generate-btn').addEventListener('click', generateAIStory);

        // 开始冒险
        document.getElementById('start-adventure').addEventListener('click', startAdventure);

        // 重置冒险
        document.getElementById('restart-adventure').addEventListener('click', restartAdventure);

        // 初始化故事
        resetStory();
    });

    // 当前故事状态
    let currentStoryStep = 0;
    let storyPath = [];

    // 更新故事
    function updateStory(stepId) {
        const step = storyBranches[stepId];
        if (!step) return;

        // 记录路径
        storyPath.push(stepId);

        // 更新故事文本
        document.getElementById('story-text').textContent = step.text;

        // 更新选择
        const choicesContainer = document.querySelector('.choices-container');
        choicesContainer.innerHTML = '';

        if (step.choices && step.choices.length > 0) {
            step.choices.forEach(choice => {
                const button = document.createElement('button');
                button.className = 'choice';
                button.setAttribute('data-next', choice.next);
                button.innerHTML = `<i class="fas fa-circle choice-icon"></i> ${choice.text}`;
                button.addEventListener('click', function() {
                    updateStory(this.getAttribute('data-next'));
                });
                choicesContainer.appendChild(button);
            });
        } else {
            // 显示结局
            document.getElementById('branch-content').textContent = step.summary;
            document.getElementById('branch-result').style.display = 'block';

            // 添加重新开始按钮
            const choicesContainer = document.querySelector('.choices-container');
            choicesContainer.innerHTML = '';

            const restartButton = document.createElement('button');
            restartButton.className = 'choice';
            restartButton.innerHTML = `<i class="fas fa-redo choice-icon"></i> 重新开始故事`;
            restartButton.addEventListener('click', resetStory);
            choicesContainer.appendChild(restartButton);
        }
    }

    // 重置故事
    function resetStory() {
        currentStoryStep = 0;
        storyPath = [];
        document.getElementById('branch-result').style.display = 'none';

        const step = storyBranches[0];
        document.getElementById('story-text').textContent = step.text;

        const choicesContainer = document.querySelector('.choices-container');
        choicesContainer.innerHTML = '';

        step.choices.forEach(choice => {
            const button = document.createElement('button');
            button.className = 'choice';
            button.setAttribute('data-next', choice.next);
            button.innerHTML = `<i class="fas fa-circle choice-icon"></i> ${choice.text}`;
            button.addEventListener('click', function() {
                updateStory(this.getAttribute('data-next'));
            });
            choicesContainer.appendChild(button);
        });
    }

    // 生成AI故事
    function generateAIStory() {
        const element1 = document.getElementById('element1').value || "宇航员";
        const element2 = document.getElementById('element2').value || "鲸鱼";

        // 显示结果区域
        const resultContainer = document.getElementById('ai-result');
        resultContainer.style.display = 'block';

        // 生成故事
        const story = generateStory(element1, element2);
        document.getElementById('ai-content').textContent = story;
    }

    // AI故事生成器
    function generateStory(element1, element2) {
        const stories = [
            `在广阔的宇宙中，${element1}号飞船遭遇星云风暴，导航系统失灵，意外跃迁到神秘的鲸鱼座星域。飞船侦测到异常巨大但优美的歌声，通过舷窗竟然看到一只行星般巨大的${element2}在星海中畅游。这只宇宙${element2}好奇地围绕着飞船游动，它的皮肤闪烁着银河的光芒。随着它张开嘴巴，${element1}惊讶地发现里面有一整个生态系统和一种可以带他们回家的技术蓝图。`,

            `作为唯一的${element1}生还者漂浮在木卫二的海洋中，${element2}群神秘地出现。它们与地球上的同类完全不同——巨大的发光眼睛像飞船的舷窗，背上闪烁着星图的生物光斑。其中一只${element2}小心翼翼地将这位${element1}托在背上，向深海城市游去。在那里，${element1}发现了一个古老的冰下文明，${element2}们守护着能够阻止地球环境崩溃的关键知识。`,

            `在一次深海勘探中，${element1}们发现了一个前所未有的深渊。在探测器进入200公里深度时，突然穿越了某种薄膜，进入了一个空气空间。更令人惊讶的是：这里有陆地、湖泊和天空中自由游弋的巨大${element2}。原来地球空心内部是一整个平行维度，而${element2}是维度守护者。这些深海${element2}与${element1}建立了心灵沟通，揭示了人类起源和地球的真正使命。`,

            `在量子通信实验中，${element1}无意间将自己的意识投射到一只${element2}身上。从那时起，他同时存在于两处：太空站实验室和深海中。通过${element2}的感官，他体验到了海水的脉动、鲸群悠远的歌声和深海都市的灯光。更震撼的是，他发现${element2}实际上拥有远超人类的集体智慧网络。当灾难威胁太空站时，正是来自鲸群意识的信息拯救了他和整个团队。`,

            `星际考古${element1}在系外行星找到一个奇异圆盘：启动后她竟然回溯到远古地球看到一头${element2}的祖先。这不是普通的回溯——那头古代${element2}直接与她意识交流！原来鲸类是远古星际文明安置在地球的记忆容器，而它们一直在等待一个${element1}的到来。通过${element2}的记忆，她看到了太阳系形成前的景象，也找到了改变未来的关键。`
        ];

        return stories[Math.floor(Math.random() * stories.length)];
    }

    // 文字冒险状态
    let currentAdventure = null;
    let adventureHistory = [];

    // 开始冒险
    function startAdventure() {
        const theme = document.getElementById('adventure-theme').value.trim().toLowerCase() || "太空探险";

        // 根据主题选择冒险模板
        if (theme.includes("太空") || theme.includes("宇宙")) {
            currentAdventure = JSON.parse(JSON.stringify(adventureTemplates.space));
        } else if (theme.includes("古墓") || theme.includes("考古")) {
            currentAdventure = JSON.parse(JSON.stringify(adventureTemplates.tomb));
        } else if (theme.includes("赛博") || theme.includes("未来")) {
            currentAdventure = JSON.parse(JSON.stringify(adventureTemplates.cyberpunk));
        } else if (theme.includes("魔法") || theme.includes("奇幻")) {
            currentAdventure = JSON.parse(JSON.stringify(adventureTemplates.fantasy));
        } else {
            // 默认太空主题
            currentAdventure = JSON.parse(JSON.stringify(adventureTemplates.space));
        }

        // 重置历史
        adventureHistory = [];

        // 显示冒险容器
        document.getElementById('adventure-container').style.display = 'block';
        document.getElementById('adventure-title').textContent = currentAdventure.title;

        // 开始冒险
        continueAdventure('start');
    }

    // 继续冒险
    function continueAdventure(step) {
        if (!currentAdventure) return;

        // 记录历史
        adventureHistory.push(step);

        // 更新故事
        document.getElementById('adventure-story').textContent = currentAdventure[step];

        // 更新选择
        const choicesContainer = document.getElementById('adventure-choices');
        choicesContainer.innerHTML = '';

        if (currentAdventure.choices) {
            currentAdventure.choices.forEach(choice => {
                const button = document.createElement('button');
                button.className = 'adventure-choice';
                button.textContent = choice.text;
                button.addEventListener('click', () => {
                    continueAdventure(choice.next);
                });
                choicesContainer.appendChild(button);
            });
        } else {
            // 冒险结束
            const endButton = document.createElement('button');
            endButton.className = 'adventure-choice';
            endButton.innerHTML = '<i class="fas fa-redo"></i> 重新开始冒险';
            endButton.addEventListener('click', restartAdventure);
            choicesContainer.appendChild(endButton);
        }
    }

    // 重置冒险
    function restartAdventure() {
        if (currentAdventure) {
            continueAdventure('start');
        }
    }

    // 保存冒险
    document.getElementById('save-adventure').addEventListener('click', function() {
        if (currentAdventure) {
            const story = adventureHistory.map(step => currentAdventure[step]).join('\n\n');
            const blob = new Blob([story], {type: 'text/plain'});
            const url = URL.createObjectURL(blob);

            const a = document.createElement('a');
            a.href = url;
            a.download = `${currentAdventure.title}_冒险故事.txt`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);

            alert('冒险故事已保存！');
        }
    });
</script>
</body>
</html>